<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>打地鼠小游戏</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
  body{margin:0;font-family:Arial;background:#e3f2fd;display:flex;flex-direction:column;align-items:center;user-select:none}
  h1{margin:20px 0;color:#0d47a1}
  #scoreBoard{display:flex;gap:20px;font-size:20px;margin-bottom:10px}
  #board{display:grid;grid-template-columns:repeat(3,100px);gap:10px}
  .hole{width:100px;height:100px;background:#8d6e63;border-radius:50%;position:relative;overflow:hidden;cursor:pointer}
  .mole{width:80px;height:80px;background:#ff9800;border-radius:50%;position:absolute;left:10px;top:100px;transition:top .2s}
  .hole.active .mole{top:10px}
  button{padding:10px 20px;font-size:18px;margin-top:20px;border:none;border-radius:4px;background:#4caf50;color:#fff;cursor:pointer}
  button:active{background:#388e3c}
</style>
</head>
<body>
<h1>打地鼠</h1>
<div id="scoreBoard">
  <div>得分：<span id="score">0</span></div>
  <div>时间：<span id="time">30</span>秒</div>
</div>
<div id="board"></div>
<button id="startBtn">开始游戏</button>

<script>
const holes=9,board=document.getElementById('board'),scoreEl=document.getElementById('score'),timeEl=document.getElementById('time'),btn=document.getElementById('startBtn');
let score=0,timeLeft=30,timer=null,popTimer=null;
// 创建地洞
for(let i=0;i<holes;i++){
  const h=document.createElement('div');h.className='hole';
  const m=document.createElement('div');m.className='mole';
  h.appendChild(m);board.appendChild(h);
  m.addEventListener('click',()=>{if(h.classList.contains('active')){score++;scoreEl.textContent=score;h.classList.remove('active')}})
}
const moles=document.querySelectorAll('.mole');
function randomPop(){
  moles.forEach(m=>m.parentElement.classList.remove('active'));
  const idx=Math.floor(Math.random()*holes);
  moles[idx].parentElement.classList.add('active');
}
function start(){
  score=0;timeLeft=30;scoreEl.textContent=score;timeEl.textContent=timeLeft;btn.style.display='none';
  timer=setInterval(()=>{
    timeLeft--;timeEl.textContent=timeLeft;
    if(timeLeft<=0){clearInterval(timer);clearInterval(popTimer);moles.forEach(m=>m.parentElement.classList.remove('active'));alert('游戏结束！得分：'+score);btn.style.display='inline-block'}
  },1000);
  popTimer=setInterval(randomPop,700);
}
btn.addEventListener('click',start);
</script>
</body>
</html>